<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:45
 * @Description: 国际大宗商品走势图
-->
<template>
  <div class="com-box">
    <com-box :title="LineZLBState.title" class="com-box-title">
      <template #titleLeft>
        <div class="header-left header-box">{{ LineZLBState.unit }}</div>
      </template>
      <div class="box">
        <charts class="box-echart" :params="LineZLBState.params"></charts>
      </div>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IState {
  title?: string
  isGroup: boolean
  itemColor?: any
  unit?: string
  params: any
  getData: (goodsId: string) => void
}
export default defineComponent({
  name: 'centerTop',
  components: {
    comBox
  },
  props: {
    goodsId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const LineZLBState: IState = reactive({
      isGroup: false,
      title: '-',
      unit: '',
      itemColor: [
        {
          color: '#F19802',
          borderColor: 'rgba(243,152,3,.3)'
        },
        {
          color: '#00FEFD',
          borderColor: 'rgba(254,255,0,.3)'
        },
        {
          color: '#FF5FF0',
          borderColor: 'rgba(201,80,191,.3)'
        }
      ],
      params: {
        loading: true,
        map: {},
        custom: true,
        forceRedraw: true, // 强制重绘
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1 * 1.9,
            padding: 12 * 1.9,
            textStyle: {
              color: '#fff',
              fontSize: 14 * 1.9
            },
            formatter: (params: any) => {
              const til = params[0].name
              let arr: any = {
                0: {},
                1: {}
              }
              for (let i = 0; i < params.length; i++) {
                if (i > 1) {
                  break
                }
                arr[i].name = params[i].seriesName
                if (i === 0) {
                  arr[i].color = params[i].color
                  arr[i].value = params[i].value
                  arr[i].lengths = 0
                } else if (i === 1) {
                  arr[i].value = params[i].value ? params[i].value : '-'
                  arr[i].color = params[i].color
                  if (arr[i - 1].name.length - arr[i].name.length > 0) {
                    arr[i].lengths = arr[i - 1].name.length - arr[i].name.length
                  } else {
                    arr[i].lengths = 0
                    arr[i - 1].lengths = -(
                      arr[i - 1].name.length - arr[i].name.length
                    )
                  }
                }
              }
              let str = `<div><div style="margin:4px">${til}</div>`
              for (const k in arr) {
                if (arr[k].color) {
                  str += ` <div style="margin:4px" ><span style="color:${
                    arr[k].color
                  };font-size:19px;margin-right:3px;">\u25CF</span>${
                    arr[k].name + '&emsp;'.repeat(arr[k].lengths)
                  }&emsp;&emsp;${arr[k].value}</div>`
                }
              }
              str += '</div>'
              return str
            }
          },
          legend: {
            show: true,
            top: 20 * 1.9,
            right: 20 * 1.9,
            textStyle: {
              fontSize: 14 * 1.9
            },
            data: []
          },
          xAxis: {
            data: [],
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: 12 * 1.9
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#406A96'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              name: '',
              type: 'value',
              position: 'left',
              axisLabel: {
                show: true,
                color: '#fff',
                rotate: 20,
                fontSize: 12 * 1.9
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#263E6C'
                }
              },
              nameTextStyle: {
                color: 'rgba(70, 237, 232, 1)',
                fontWeight: 'bold',
                align: 'left',
                fontSize: 14 * 1.9
              }
            },
            {
              name: '',
              type: 'value',
              alignTicks: true,
              axisLabel: {
                show: true,
                color: '#fff',
                rotate: -20
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#263E6C'
                }
              }
            }
          ],
          grid: {
            top: 50 * 1.9,
            bottom: 80 * 1.9,
            left: 55 * 1.9,
            right: 55 * 1.9
          },
          series: [],
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '84%',
              left: '7.3%',
              bottom: 28 * 1.9,
              height: 15 * 1.9,
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4 * 1.9
              },
              moveHandleSize: 10 * 1.9,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4 * 1.9
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ]
        }
      },
      getData: (goodsId) => {
        LineZLBState.params.loading = true
        const arrSeries = {
          name: '',
          type: 'line',
          label: {
            show: false
          },
          smooth: true,
          areaStyle: {
            opacity: 0
          },
          symbolSize: 8,
          symbol: 'circle',
          data: []
        }
        httpRequest
          .get({ url: 'M2P2GnwList', params: { goodsId } })
          .then((res) => {
            if (res.code === 200) {
              LineZLBState.unit = res.unit ? `单位：${res.unit}` : ''
              const data1: string[] = []
              const data2: string[] = []
              // const data3: string[] = []
              const name: string[] = []
              const legendData: any = []
              const series: any = Object.values(res.map).map(() =>
                JSON.parse(JSON.stringify(arrSeries))
              )
              res.data.forEach((item: any, index: number) => {
                name.push(item.name)
                data2.push(item.value2 ? item.value2 : '-')
                if (index + 1 === res.month) {
                  data1.push(item.value1 ? item.value1 : '-')
                  // data3.push(item.value1 ? item.value1 : '-')
                } else if (index + 1 > res.month) {
                  data1.push('-')
                  // data3.push(item.value1 ? item.value1 : '-')
                } else {
                  // data3.push('-')
                  data1.push(item.value1 ? item.value1 : '-')
                }
              })
              series.forEach((item: any, index: number) => {
                if (index === 0) {
                  item.data = data1
                  item.yAxisIndex = 0
                }
                if (index === 1) {
                  item.data = data2
                  if (res.min2 === 0 || Boolean(res.min2)) {
                    item.yAxisIndex = 1
                  } else {
                    item.yAxisIndex = 0
                  }
                }
                item.connectNulls = true
                item.name = res.map[`value${index + 1}`]
                item.lineStyle = {
                  color: LineZLBState.itemColor[index].color
                }
                item.itemStyle = {
                  color: LineZLBState.itemColor[index].color,
                  borderColor: LineZLBState.itemColor[index].borderColor,
                  borderWidth: 4
                }
                legendData.push({
                  name: res.map[`value${index + 1}`],
                  lineStyle: {
                    color: LineZLBState.itemColor[index].color
                  },
                  textStyle: {
                    color: LineZLBState.itemColor[index].color
                  }
                })
              })
              if (res.month && Boolean(res.month)) {
                series[0].markArea = {
                  itemStyle: {
                    color: 'rgba(33, 122, 255, 0.2)'
                  },
                  data: [
                    [
                      {
                        xAxis: name[res.month - 1]
                      },
                      {
                        xAxis: name[name.length - 1]
                      }
                    ]
                  ],
                  silent: true
                }
              }
              LineZLBState.params.options.xAxis.data = name
              LineZLBState.params.options.yAxis[0].name = ''
              LineZLBState.params.options.yAxis[0].min =
                Math.floor(res.min1) || 0
              LineZLBState.params.options.yAxis[1].min =
                Math.floor(res.min2) || 0
              LineZLBState.title = res.title
              LineZLBState.params.options.legend.data = legendData
              LineZLBState.params.options.series = series
              LineZLBState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const refreshData = () => {
      LineZLBState.getData(props.goodsId)
    }

    watch(
      () => props.goodsId,
      (newVal) => {
        LineZLBState.getData(newVal)
      }
    )
    LineZLBState.getData(props.goodsId)
    return {
      LineZLBState,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
@MX: 1.9; // 放大倍数
.com-box {
  width: 620px * @MX;
  height: 400px * @MX;
  overflow: hidden;

  .com-box-title {
    ::v-deep(.com-header) {
      height: 45px * @MX;
    }
    ::v-deep(.title) {
      font-size: 20px * @MX;
      line-height: 45px * @MX;
      background-size: 264px * @MX 45px * @MX;
      flex: 0 0 264px * @MX;
    }
  }
  .box {
    height: calc(100%);
    width: 100%;
  }
}
.header-box {
  white-space: nowrap;
  width: 100%;
  height: 100%;
  font-size: 14px * @MX;
  text-align: left;
  color: #46ede8;
  font-family: 'Microsoft YaHei';
  display: flex;
  align-items: flex-end;
  font-weight: bold;
}

.header-left {
  justify-content: flex-start;
  padding: 0px 20px * @MX;
}
</style>
